import React, { useState, useEffect } from 'react';
import { NavBar, Space, Button } from 'antd-mobile';
import { ShareO, WeappNav } from '@react-vant/icons';
import { ShareSheet } from 'react-vant';
import {
  Dialog,
  List,
  SwipeAction,
  Toast,
  Image,
  ActionSheet,
} from 'antd-mobile';

export default function Index() {
  const [visible, setVisible] = useState(false);
  const back = () => {
    history.goBack();
  };
  const options1 = [
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
    ],
  ];
  const right = (
    <div style={{ fontSize: 24 }} onClick={() => setVisible(true)}>
      <Space style={{ '--gap': '16px' }}>
        <ShareO />
      </Space>
      <ShareSheet
        visible={visible}
        options={options1}
        title="立即分享给好友"
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          setVisible(false);
        }}
      />
    </div>
  );
  return (
    <>
      <NavBar
        onBack={back}
        right={right}
        style={{
          backgroundColor: '#f6f5f6',
          position: ' sticky',
          top: '0',
          zIndex: '99999',
        }}
      >
        请帖
      </NavBar>
    </>
  );
}
